﻿@{

}

<link href="@Url.Content("~/Content/ForAdmin/css/uniform.default.css")" rel="stylesheet" type="text/css"/>



<script type="text/javascript" src="@Url.Content("~/Content/ForAdmin/js/jquery.dataTables.js")"></script>

<script type="text/javascript" src="@Url.Content("~/Content/ForAdmin/js/DT_bootstrap.js")"></script>

<div class="container-fluid">
    <div class="row-fluid">

        <div class="span12">

            <!-- BEGIN PAGE TITLE & BREADCRUMB-->

            <h3 class="page-title">客户列表 <small></small>

            </h3>

            <ul class="breadcrumb">

                <li>

                    <i class="icon-home"></i>

                    <a href="/Admin/Index">操作中心面板</a>

                    <i class="icon-angle-right"></i>

                </li>

                <li>

                    <a href="#">客户管理</a>

                    <i class="icon-angle-right"></i>

                </li>

                <li><a href="#">客户列表</a></li>

            </ul>

            <!-- END PAGE TITLE & BREADCRUMB-->

        </div>

    </div>

    <div class="row-fluid">

        <div class="span12">

            <!-- BEGIN EXAMPLE TABLE PORTLET-->

            <div class="portlet box blue tabbable">

                <div class="portlet-title">

                    <div class="caption">
                        <i class="icon-globe"></i>客户列表
                    </div>
                </div>

                <div class="portlet-body">

                    <div class="clearfix">
                        <div class="row-fluid">
                        <div class="btn-group">

                            <button id="sample_editable_1_new" class="btn blue">
                                添加客户 <i class="icon-plus"></i>

                            </button>

                        </div>

                        
                        <div class="btn-group pull-right">

                            <button class="btn dropdown-toggle" data-toggle="dropdown">
                                操作<i class="icon-angle-down"></i>

                            </button>

                            <ul class="dropdown-menu pull-right">

                                <li><a id="deletea" href="#">删除选中项</a></li>

                            </ul>

                        </div>
                            </div>
                    </div>

                    <div class="" role="grid">
                        <div class="row-fluid">
                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover" id="sample_1">

                        <thead>

                            <tr>

                                <th></th>

                                <th></th>

                                <th class="hidden-480"></th>

                                <th class="hidden-480"></th>

                                <th  style="width:30px"></th>

                                <th></th>

                            </tr>

                        </thead>

                        <tbody></tbody>

                    </table>
                </div>

                <!-- END EXAMPLE TABLE PORTLET-->

            </div>

        </div>
    </div>

    <script>

        function SetStatus(e) {
            if ($(e).attr("checked") == null) {
                $.ajax({
                    type: 'POST',
                    url: "/Admin/SetCustomerOn/" + $(e).val(),
                    success: function (data) {
                        $.gritter.add({
                            title: '提示信息',
                            text: data,
                        });
                    },
                    error: function (data) {
                        $.gritter.add({
                            title: '提示信息',
                            text: data,
                        });
                    }
                });
            }
            else {
                $.ajax({
                    type: 'POST',
                    url: "/Admin/SetCustomerOff/" + $(e).val(),
                    success: function (data) {
                        $.gritter.add({
                            title: '提示信息',
                            text: data,
                        });
                    },
                    error: function (data) {
                        $.gritter.add({
                            title: '提示信息',
                            text: data,
                        });
                    }
                });
            }
        }

        var tbl = $('#sample_1').dataTable({
            "oLanguage": {
                "sSearch": "搜索:",
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "Nothing found - 没有记录",
                "sInfo": "显示第  _START_ 条到第  _END_ 条记录,一共  _TOTAL_ 条记录",
                "sInfoEmpty": "显示0条记录",
                "oPaginate": {
                    "sPrevious": " 上一页 ",
                    "sNext": " 下一页 ",
                }
            },
            "iDisplayLength": 10,
            "sPaginationType": "bootstrap",
            "bProcessing": true,
            "bLengthChange": false,
            "bSort": false,
            'bPaginate': true,  //是否分页。
            "bServerSide": true,
            "sAjaxSource": "/Admin/GetCustomerList/0",//+ $('#category').val(),
            "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
            "aoColumns": [
                            
                            { "sTitle": "客户名称", "mData": "CustomerName", },
                            { "sTitle": "联系人", "mData": "ContactName", },
                            { "sTitle": "联系电话", "mData": "CustomerPhomeNum", },
                            { "sTitle": "应收款", "mData": "CustomerInitOwing", },
                            {
                                "sTitle": "停用",
                                "mData": "Id", "fnRender": function (obj) {
                                    if (obj.aData["Status"] == 0) {
                                        return '<input onclick="SetStatus(this)" type="checkbox"  checked="checked"  class="checkboxes" value=\"' + obj.aData["Id"] + '\">';
                                    }
                                    else {
                                        return '<input onclick="SetStatus(this)" type="checkbox" class="checkboxes" value=\"' + obj.aData["Id"] + '\">';
                                    }
                                }
                            },
                            {
                                "mData": "OtherInfo",
                                "sTitle": "操作",
                                "sClass": "center",
                                "fnRender": function (obj) {
                                    //alert(obj.aData["Id"]);
                                    return '<a target=\"_blank\" href=\"/ViewCustomer/' + $(obj.aData["Id"]).val() + '\">查看详情</a><br/><a href=\"javascript:void(0)\" target=\"_blank\" onclick=\"Ajax_Location(\'/Admin/UpdateCustomer/' + $(obj.aData["Id"]).val() + '\')\">修改客户</a>';
                                }
                            }
            ]
            //"aaData":  //aaData此属性不能改名，DataTable插件使用就是使用这个属性进行数据表的填充，丫这个属性坑了爹好长时间。
            //    [{ "Id": "b13a32ad-1966-443e-aa85-5875cc46e79a", "Title": "产品1", "Body": "1111111111", "Created": "\/Date(1375509334000)\/", "CategoryId": "e1816e33-8bfb-dac3-4e12-5a49030fa692", "ImgUrl": "../upload/images/20130803/201308031355280612.jpg", "IsDisplay": "1", "Lang": "2" }]
        });

        $('#category').change(function () {
            ResetTableData();
        });

       

        $('#sample_editable_1_new').click(function () {
            Ajax_Location('/Admin/AddCustomer');
        });

        $('#deletea').click(function () {
            jQuery("#sample_1 .checkboxes").each(function (e) {
                if ($(this).attr("checked") == "checked") {
                    $.ajax({
                        type: 'POST',
                        url: "/Admin/DeleteProduct/" + $(this).val(),
                        success: function (data) {
                            ResetTableData();
                            $.gritter.add({
                                title: '提示信息',
                                text: data,
                            });
                        },
                        error: function (data) {
                            $.gritter.add({
                                title: '提示信息',
                                text: data,
                            });
                        }
                    });
                }
            });
        });

        $('#sample_1 .group-checkable').change(function () {
            var set = jQuery(this).attr("data-set");
            var checked = jQuery(this).is(":checked");
            jQuery(set).each(function () {
                if (checked) {
                    $(this).attr("checked", true);
                    $(this).parent().attr("class", "checked");
                } else {
                    $(this).attr("checked", false);
                    $(this).parent().attr("class", "");
                }
            });
            jQuery.uniform.update(set);
        });

        //jQuery('#sample_1_wrapper .dataTables_filter input').addClass("m-wrap medium"); // modify table search input
        //jQuery('#sample_1_wrapper .dataTables_length select').addClass("m-wrap small"); // modify table per page dropdown
        //jQuery('#sample_1_wrapper .dataTables_length select').select2(); // initialzie select2 dropdown
        function ResetTableData() {
            var oSettings = tbl.fnSettings();
            //alert(tbl);
            oSettings.sAjaxSource = "/Admin/GetProductList/" + $('#category').val();
            //alert(oSettings.sAjaxSource);
            tbl.fnClearTable();
            tbl.fnDraw(oSettings);
        }
    </script>
